<!--执行历史详情-子币对-->
<template>
  <div class="bg" @rightBtn="rightBtn">
    <scroller class="scroller">
      <div class="wrapper bg1" v-if="menus">
        
        <!--跟单-基础信息-->
        <div class="column" v-if="detailMap.isFollow">
          <div class="row acenter">
            <div class="row aend">
              <text class="font32 text1">{{T(detailMap.strategyName)}}</text>
              <text class="font24 text3" v-if="detailMap.strategyCode">{{'  '+detailMap.strategyCode}}</text>
            </div>
            <div class="all"></div>
            <text class="font28 text1">{{T('跟单佣金')+':'+detailMap.commission+'VTN/日'}}</text>
          </div>

          <div class="height20"></div>
          <text class="font24 text3">{{parseTime1(detailMap.startTime)+'-'+parseTime1(detailMap.endTime)+'('+getExecuteTime()+')'}}</text>
          
          <div class="line bg3"></div>

          <div class="row acenter" @click="userClick(detailMap.followUserId)">
          <LImage class="image" :src="detailMap.avatar"></LImage>  
          <text class="font32 text1">{{detailMap.nickName}}</text>
          <div class="all"></div>
          <LImage class="arrow" :src="Config.img('strategy_arrow.png')"></LImage>
          </div>
        </div>
        
        <!--其他-基础信息-->
        <div class="column" v-else>

          <div class="row acenter">
            <div class="row aend">
              <text class="font32 text1">{{detailMap.strategyName}}</text>
              <text class="font24 text3" v-if="detailMap.strategyCode">{{'  '+detailMap.strategyCode}}</text>
            </div>
            <div class="all"></div>
            <text :class="['font28', (detailMap.states == 'EXECUTE' ?  'main-t1' : 'text3')]">{{getStateStr(detailMap.states)}}</text>
          </div>

          <div class="height20"></div>
          <div class="row aend">
            <text class="font24 text3">{{parseTime1(detailMap.startTime)+'-'+parseTime1(detailMap.endTime)+'('+getExecuteTime()+')'}}</text>
            <div class="all"></div>
            <text class="font28 text3" v-if="detailMap.isOpenFollow==true">{{T("开放跟单")}}</text>
          </div>
        </div>

        <!--交易数-->
        <div class="line bg3"></div>
        <div class="row all">
          <div class="column all">
            <text class="font24 text3">{{T('累计买入')}}</text>
            <text class="font24 text2">{{pairMap.finishBuyCount}}</text>
          </div>
          <div class="column all">
            <text class="font24 text3">{{T('累计卖出')}}</text>
            <text class="font24 text2">{{pairMap.finishSellCount}}</text>
          </div>
          <div class="column all aend">
            <text class="font24 text3">{{T('交易数')}}</text>
            <text class="font24 text2">{{pairMap.finishBuySellCount}}</text>
          </div>
        </div>

        <!--止盈止损-->
        <div class="line bg3"></div>
        <div class="column">
          <text class="font28 text1">{{T('止盈止损')}}</text>
          <div class="height20"></div>
          <div class="row all">

            <div class="column all">
              <text class="font24 text3">{{T('策略止盈率')}}</text>
              <text class="font24 text2">{{stopProfit}}</text>
            </div>

            <div class="column all">
              <text class="font24 text3">{{T('策略止损率')}}</text>
              <text class="font24 text2">{{stopLoss}}</text>
            </div>

            <div class="column all aend">
              <text class="font24 text3">{{T('自动终止时间')}}</text>
              <text class="font24 text2">{{stopTime}}</text>
            </div>
          </div>
        </div>

        <!--持仓-->
        <div class="line bg3"></div>
        <div class="column">
          <text class="font28 text1">{{T('持仓')}}</text>
          <div class="height40"></div>
          <div class="row jbetween">
            <div class="column">
              <text class="font20 text3">{{T('币种')}}</text>
              <div class="height20"></div>
              <text class="font20 text2">{{pairMap.inverstCoin}}</text>
              <div class="height20"></div>
              <text class="font20 text2">{{pairMap.inverstCoin == pairMap.baseCoin ? pairMap.counterCoin : pairMap.baseCoin}}</text>
            </div> 

            <div class="column">
              <text class="font20 text3">{{T('数量')}}</text>
              <div class="height20"></div>
              <text class="font20 text2">{{pairMap.inverstCoin == pairMap.baseCoin ? pairMap.baseCoinTotal : pairMap.counterCoinTotal}}</text>
              <div class="height20"></div>
              <text class="font20 text2">{{pairMap.inverstCoin == pairMap.baseCoin ? pairMap.counterCoinTotal : pairMap.baseCoinTotal}}</text>
            </div>

            <div class="column">
              <text class="font20 text3">{{T('浮动盈亏')+'('+pairMap.inverstCoin+')'}}</text>
              <div class="height20"></div>
              <text class="font20 text2">{{'--'}}</text>
              <div class="height20"></div>
              <text :class="['floatText', 'font20', Config.upDownFont(pairMap.floatEarnings)]">{{pairMap.floatEarnings}}</text>
            </div>

            <div class="column aend">
              <text class="font20 text3">{{T('开仓均价')+'('+pairMap.inverstCoin+')'}}</text>
              <div class="height20"></div>
              <text class="font20 text2">{{'--'}}</text>
              <div class="height20"></div>
              <text class="floatText font20 text2">{{math.getNumber(pairMap.costPrice) == 0 ? '--' : pairMap.costPrice}}</text>
            </div>
          </div>
        </div>
      </div>
    </scroller>
    
    <!-- 菜单 -->
    <div class="menu" v-if="showMenu" @click="hideClick">
      <div class="meun-content bg3">
        <text class="font24 text2 meun-text" v-for="(item, index) in menus" v-bind:key="index" @click="menuClick(item)">{{T(item)}}</text>
      </div>
    </div>
  </div>
</template>

<script>
import navigator from "@/_js/navigator";
import modal from "@/_js/modal";
import math from "@/_js/math";
import Config from "@/_js/config";

const weexFunction = weex.requireModule("WeexFunction");
import weexHttp from "@/_js/https"; ;

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T("历史详情"));
weexFunction.setRightBtn(T("功能"));

//执行详情
export default {
  
  data() {
    return {
      T: T,
      Config:Config,
      math:math,
      showMenu:false, //显示功能
      menus:undefined, //菜单

      executeId: "", //执行id

      detailMap: undefined, //执行信息
      pairMap: undefined, //交易对信息
      configMap: undefined, //执行配置

      stopProfit: '', //止盈
      stopLoss: '', //止损
      stopTime: '', //自动终止时间
    };
  },

  mounted() {
    Config.init(()=>{
      this.executeId = navigator.getParam("executeId");
      this.httpExecuteDetail();
    },[Config.OPT_UP_DOWN]);
  },

  methods: {
    //初始菜单
    initMenu(){
      
      this.menus = ['消息', '参数', '成交记录'];
      if (this.detailMap.isFollow){
        this.menus = ['消息', '成交记录'];
      }
    },

    /*************************************************通信触发*/
    //右按钮触发
    rightBtn() {
      this.menus&&(this.showMenu = !this.showMenu);
    },
    /********************************** HTTP*/
    //http执行详情
    httpExecuteDetail() {

      this.detailMap = undefined;
      var param = { executeId: this.executeId};
      weexHttp.post("strategyV3/executeHistoryDetail",param,true,(data) => {

        if (data.status == 200) {
          data = data.data;    

          var result  = data.executeHistoryDetail.result;
          var pair = result.pairs[0];
          this.pairMap = pair.data;

          this.detailMap = data.executeHistoryDetail;
          this.configMap = data.executeHistoryDetail.config;

          //交易数量
          this.pairMap.finishBuyCount = this.pairMap.finishBuyCount ? this.pairMap.finishBuyCount : '0';
          this.pairMap.finishSellCount = this.pairMap.finishSellCount ? this.pairMap.finishSellCount : '0';
          this.pairMap.finishBuySellCount = math.jia(this.pairMap.finishBuyCount, this.pairMap.finishSellCount);

          //止盈止损
          this.configMap.stopProfit = this.configMap.stopProfit?this.configMap.stopProfit:'';
          this.stopProfit = this.configMap.stopProfit.length > 0 ? (math.cheng(this.configMap.stopProfit, '100') + '%') : '--';
          this.configMap.stopLoss = this.configMap.stopLoss?this.configMap.stopLoss:'';
          this.stopLoss = this.configMap.stopLoss.length > 0 ? (math.cheng(this.configMap.stopLoss, '-100') + '%') : '--';
          this.configMap.stopTime = this.configMap.stopTime?this.configMap.stopTime:'';
          this.stopTime = this.configMap.stopTime.length > 0 ? this.parseTime1(math.getNumber(this.configMap.stopTime)) : '--';

          //交易币、本币、投资币
          this.pairMap.inverstCoin = this.pairMap.inverstCoin.toUpperCase();
          this.pairMap.counterCoin = this.pairMap.counterCoin.toUpperCase();
          this.pairMap.baseCoin = this.pairMap.baseCoin.toUpperCase();

          //交易币、本币 数量/冻结数量
          this.pairMap.baseCoinTotal = math.xiaoshu(this.pairMap.baseCoinTotal, math.getCoin(this.pairMap.baseCoin));
          this.pairMap.counterCoinTotal = math.xiaoshu(this.pairMap.counterCoinTotal, math.getCoin(this.pairMap.counterCoin));
          this.pairMap.baseCoinFreez = math.xiaoshu(this.pairMap.baseCoinFreez, math.getCoin(this.pairMap.baseCoin));
          this.pairMap.counterCoinFreez = math.xiaoshu(this.pairMap.counterCoinFreez, math.getCoin(this.pairMap.counterCoin));

          //交易币、本币 数量/冻结率
          this.pairMap.baseCoinTotal = math.xiaoshu(this.pairMap.baseCoinTotal, math.getCoin(this.pairMap.baseCoin));
          this.pairMap.counterCoinTotal = math.xiaoshu(this.pairMap.counterCoinTotal, math.getCoin(this.pairMap.counterCoin));
          var baseCoinFreezRate = math.chu(this.pairMap.baseCoinFreez, this.pairMap.baseCoinTotal, 4, 2);
          var counterCoinFreezRate = math.chu(this.pairMap.counterCoinFreez, this.pairMap.counterCoinTotal, 4, 2);
          baseCoinFreezRate = math.getNumber(baseCoinFreezRate) > 1 ? '1' : baseCoinFreezRate;
          counterCoinFreezRate = math.getNumber(counterCoinFreezRate) > 1 ? '1' : counterCoinFreezRate;
          this.pairMap.baseCoinFreezRate = math.cheng(baseCoinFreezRate, '100', 2, 2);
          this.pairMap.counterCoinFreezRate = math.cheng(counterCoinFreezRate, '100', 2, 2);

          //浮动盈亏
          // var xiaoshu = math.getCoin(this.pairMap.inverstCoin);
          // var profitLoss;
          // if (this.pairMap.inverstCoin == this.pairMap.baseCoin) {
          //   var price = math.jian(this.pairMap.curPrice, this.pairMap.costPrice);
          //   profitLoss = math.cheng(price, this.pairMap.counterCoinTotal, xiaoshu, 2);
          // } else {
          //   var cost = math.chu(this.pairMap.baseCoinTotal, this.pairMap.costPrice); //成本价
          //   var cur = math.chu(this.pairMap.baseCoinTotal, this.pairMap.curPrice); //当前价
          //   profitLoss = math.jian(cost, cur, xiaoshu, 2);
          // }
          // this.pairMap.profitLoss = profitLoss;

          //浮动盈亏率
          // var profitLossRate;
          // if (this.pairMap.inverstCoin == this.pairMap.baseCoin) {
          //   var price = math.jian(this.pairMap.curPrice, this.pairMap.costPrice);
          //   profitLossRate = math.chu(price, this.pairMap.costPrice, 4, 2);
          // } else {
          //   var price = math.jian(this.pairMap.costPrice, this.pairMap.curPrice);
          //   profitLossRate = math.chu(price, this.pairMap.costPrice, 4, 2);
          // }
          // profitLossRate = math.cheng(profitLossRate, '100', 2);
          // this.pairMap.profitLossRate = profitLossRate;

          this.initMenu();

        } else {
          modal.toast(data.msg);
        }
      });
    },

    /********************************** GET*/
    //获得策略状态字符
    getStateStr(states) {
      if (states == "STOP_HAND") {
        return T("手动终止");
      }
      if (states == "STOP_PROFIT") {
        return T("已止盈");
      }
      if (states == "STOP_LOSS") {
        return T("已止损");
      }
      if (states == "STOP_TIME") {
        return T("已定时终止");
      }
      if (states == "STOP_AUTO") {
        return T("已自动终止");
      }
      if (states == "FORCE_CLOSE") {
        return T("已强平");
      }
    },

    //时间转换(年月日时分)
    parseTime1(timestamp) {
      var time = new Date(Number(timestamp));

      var year = time.getFullYear();

      var month = time.getMonth() + 1;
      month = month < 10 ? "0" + month : month;

      var day = time.getDate();
      day = day < 10 ? "0" + day : day;

      var hour = time.getHours();
      hour = hour < 10 ? "0" + hour : hour;

      var minute = time.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;

      return year + "/" + month + "/" + day + " " + hour + ":" + minute;
    },

    //获取执行时长
    getExecuteTime() {
      var startTime = this.detailMap.startTime
      var endTime = this.detailMap.endTime
      

      var disTime = endTime - startTime;
      var day = Math.floor(disTime / 86400000);
      var hour = Math.floor((disTime % 86400000) / 3600000);
      var min = Math.floor(((disTime % 86400000) % 3600000) / 60000);
      return day + T("天") + hour + T("时") + min + T("分");
    },

    /********************************** 点击*/
    //隐藏
    hideClick(){
      if (this.detailMap == undefined){
        return;
      }
      this.showMenu = false;
    },

    //菜单点击
    menuClick(item){
      this.hideClick();

      if (item == '消息') {
        navigator.open(T('策略消息'), 'strategy/StrategyNotice', {stId:this.executeId});
      }
      
      if (item == '成交记录') {
        var param = {'executeId':this.executeId,
        'counterCoin':this.pairMap.counterCoin,
        'baseCoin':this.pairMap.baseCoin};
        navigator.openNative('tradeRecord',param);
        return;
      }

      if (item == '参数') {
        
        var param = {'configMap':this.configMap,
                    // 'followMap':this.followMap,
                    'isOpenFollow':this.detailMap.isOpenFollow,
                    // 'followMimic':this.followMimic
                    };
        navigator.open('', 'run/HRunParamz',param);
      }
    },

    //用户点击
    userClick(userId){
      var param = {'userId':userId};
      navigator.open('', "follw/UFollwManInfo",param);
    },
  },
};
</script>

 
<style src="@/_css/style.css"></style>
<style scoped>
.bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
}
.scroller {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
}
.wrapper {
  width: 750px;
  padding: 44px;
}
.line {
  margin-top: 40px;
  width: 710px;
  height: 2px;
  margin-bottom: 40px;
}
.line2 {
  margin-top: 40px;
  width: 710px;
  height: 2px;
  margin-bottom: 20px;
}
.floatText{
  line-height: 40px;
}
.text-right{
  text-align: right;
}
.text68{
  height: 68px;
  line-height: 68px;
}
.image{
  width: 56px;
  height: 56px;
  margin-right: 40px;
}
.arrow{
  width: 20px;
  height: 20px;
}
/*********************************** 菜单*/
.menu{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
}
.meun-content {
  position: absolute;
  width: 204px;
  border-radius: 4px;
  
  padding-top: 20px;
  padding-bottom: 20px;

  top: 0;
  right: 0;
}
.meun-text {
  height: 80px;
  line-height: 80px;
  width: 204px;
  text-align: center;
}

/*********************************** 高度*/
.height20 {
  height: 20px;
}
.height40 {
  height: 40px;
}
</style>
